import { memo, useEffect } from "react";

import * as echarts from "echarts"

import {sendEchartsStructure} from "api"

export default memo(function Home(props) {


    // 发送请求
    useEffect(() => {
         getdata()
    }, [])

    const getdata=async ()=>{
        let data=await sendEchartsStructure()
        init(data.data)
    }

    function init(data) {

        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById("echarts2"));

        // 指定图表的配置项和数据
        let option = {
            title: {
                text: "学历占比(%)",
            },
            tooltip: {
                trigger: "axis",
            },
            legend: {
                data: ["本科", "研究生", "博士"],
            },
            grid: {
                left: "6%",
                right: "3%",
                bottom: "3%",
                containLabel: true,
            },
            toolbox: {
                show: true,
                orient: "vertical",
                left: "left",
                top: "center",
                feature: {
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ["line", "bar"] },
                    restore: { show: true },
                    saveAsImage: { show: true },
                },

            },
            xAxis: {
                type: "category",
                boundaryGap: false,
                data: ["2016", "2017", "2018", "2019", "2020"],
            },
            yAxis: {
                type: "value",
            },
            series: data,
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
    return (
        <div className="echarts">

            <div
                style={{ width: '700px', height: '450px' }}
                className="echarts2"
                id="echarts2"
            ></div>
        </div>
    )
})
